<template>
  <div class="modify">
    <h1 class="title">修改密码</h1>
    <div class="box">
      <div class="wrapper">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="right"
          label-width="120px"
          hide-required-asterisk
        >
          <el-form-item label="原密码：" prop="password2">
            <el-input
              :key="passwordType2"
              ref="password2"
              v-model="form.password2"
              :type="passwordType2"
              placeholder="请输入密码"
              name="password2"
              tabindex="1"
              autocomplete="on"
            >
              <span slot="suffix" class="show-pwd" @click="showPwd2">
                <svg-icon
                  :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item label="设置新密码：" prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="form.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              autocomplete="on"
            >
              <span slot="suffix" class="show-pwd" @click="showPwd">
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item label="重复新密码：" prop="password1">
            <el-input
              :key="passwordType1"
              ref="password1"
              v-model="form.password1"
              :type="passwordType1"
              placeholder="请再次输入新密码"
              name="password1"
              tabindex="3"
              autocomplete="on"
            >
              <span slot="suffix" class="show-pwd" @click="showPwd1">
                <svg-icon
                  :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" tabindex="4" @click="onSubmit">确 认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { modifyPassword } from '@/api/user';
import { validPassword } from '@/utils/validate';
export default {
  name: 'PasswordModify',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6 || value.length > 20) {
        callback(new Error('密码长度在6到20个数之间'));
      } else if (!validPassword(value)) {
        callback(new Error('密码中必须包含字母、数字'));
      } else {
        callback();
      }
    };
    const validatePassword1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        password: '',
        password1: '',
        password2: ''
      },
      passwordType: 'password',
      passwordType1: 'password',
      passwordType2: 'password',

      rules: {
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        password1: [
          { required: true, trigger: 'blur', validator: validatePassword1 }
        ],
        password2: [
          { required: true, trigger: 'blur', message: '请填写旧密码' }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    showPwd1() {
      if (this.passwordType1 === 'password') {
        this.passwordType1 = '';
      } else {
        this.passwordType1 = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password1.focus();
      });
    },
    showPwd2() {
      if (this.passwordType2 === 'password') {
        this.passwordType2 = '';
      } else {
        this.passwordType2 = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password2.focus();
      });
    },
    onSubmit() {
      const id = this.shopInfo.id;
      const oldPassword = this.form.password2;
      const newPassword = this.form.password;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          new Promise((resolve, reject) => {
            modifyPassword({ oldPassword, newPassword, id }).then(res => {
              this.loading = false;
              this.$message({
                message: '修改成功！',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.form = {
                    password: '',
                    password1: '',
                    password2: ''
                  };
                  this.$router.push({ path: '/' });
                }
              });

              resolve(res);
            }).catch(error => {
              this.loading = false;
              reject(error);
            });
          });
        } else {
          this.$message({
            message: '请填写信息',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
	.modify{
    font-size: $fontSizeBase;
    color: $textColorDark;
    background-color: #fff;
    .box{
      padding-top: 70px;
      display: flex;
      justify-content: center;
      min-height: calc(100vh - 255px);
    }
    /deep/ .el-input{
      width: 355px;
    }
    /deep/ .el-input__suffix{
      padding-right: 10px;
    }
  }
</style>
